<!--
 * @Author: wangming
 * @Date: 2022-05-20 17:35:31
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-20 17:42:51
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/__comModule__/Ruleconditions.vue
 * @Description: 
-->
<template>
  <el-form-item label="显示条件设置">
    <div class="ks-row" style="width: 300px">
      <div>
        <i
          class="el-icon-circle-plus-outline iconcolor poi"
          @click="addRule"
        ></i>
      </div>
      <div class="ks-col ml10" v-if="!!FormData.RuleConditions">
        <div
          class="ks-row-middle g6 mt5 codebg lh1"
          v-for="(item, jdex) in FormData.RuleConditions"
          :key="jdex"
        >
          <div class="ks-col">{{ item.name }}</div>
          <span
            class="iconfont iconbianji mr10 poi"
            @click="editRule(jdex, item)"
          ></span>
          <span
            class="iconfont iconicon_shanchu poi"
            @click="remove(jdex)"
          ></span>
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script>
import Rule from "./addModule/rule";
export default {
  props: ["formOption", "FormData"],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    addRule() {
      Rule.addModule(this.formOption).then((form) => {
        if (!!this.FormData.RuleConditions) {
          this.FormData.RuleConditions.push(form);
        } else {
          this.$set(this.FormData, "RuleConditions", [form]);
        }
      });
    },
    remove(index) {
      this.FormData.RuleConditions.splice(index, 1);
    },
    editRule(index, item) {
      Rule.editModule(item, this.formOption).then((form) => {
        this.FormData.RuleConditions.splice(index, 1, form);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.codebg {
  background-color: #f3f9ff;
  padding: 4px 6px;
  box-sizing: border-box;
}
</style>
